import  React from 'react';

import { getDetailInfo } from '../../fetch/CardList/CardList'
import { Card, WingBlank, Flex ,Grid } from 'antd-mobile';

class  Detail extends  React.Component{



    constructor(props, context) {
        super(props, context);
        this.state = {
            data: {}
        }

    }

    componentDidMount() {
        //获取详细信息
        this.getInfo()
    }

    getInfo() {
        console.log(this.props.match.params.id);
        const id = this.props.match.params.id


        var biz={biz: '{givingId: '+id+'}'};

        //console.log(biz)
        const result = getDetailInfo(biz)
        this.resultHandle(result);

        //alert(id);
    }


    // 处理数据
    resultHandle(result) {
        result.then(res => {
            return res.json()
        }).then(json => {
            const data = json.data
            console.log(data);
            this.setState(
                {data : data}
            );
        }).catch(ex => {

        })
    }

    render() {


        if(this.state.data.title==null||this.state.data.title==undefined){

            return(<div>

            </div>)
        }else{

            const data1 = Array.from(new Array(9)).map(() => ({
                icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
            }));

            let imgurl=this.state.data.imgUrl==null?"":this.state.data.imgUrl;

            return (

                <div>
                    <Flex>
                        <Flex.Item>

                            <WingBlank size="md"  >

                                <Card>
                                    <Card.Header
                                        title={
                                            <div >
                                                <Flex>
                                                    <Flex.Item>{this.state.data.title==null?"空的标题":this.state.data.title}</Flex.Item>
                                                </Flex>
                                                <Flex>
                                                    <Flex.Item>{this.state.data.pubTimie==null?"发布时间":this.state.data.pubTimie}</Flex.Item>
                                                </Flex>
                                            </div>
                                        }
                                        thumb={this.state.data.tails.avatar==null?"http://202.106.78.3:10001/api-common/file/20171106/filename?flname=40e49f8839264634a1d15964ae1a8161_image-png.jpg":this.state.data.tails.avatar}

                                        thumbStyle={{width:"100px"}}
                                    />
                                    <Card.Body>
                                        <div>
                                            <p>
                                                {this.state.data.bookDesc}
                                            </p>
                                         {
                                                    imgurl.split(",").map(function (item,index) {
                                                    return (

                                                    <div key={index}>
                                                      <img src={item} style={{width: '90%'}} alt="" />
                                                    </div>


                                                    )}
                                                )

                                        }</div>
                                    </Card.Body>

                                </Card>

                            </WingBlank>

                        </Flex.Item>

                    </Flex>


                </div>
            )
        }

    }
}

export  default Detail;